<template>
    <div>
        <el-container style="border: 1px solid #eee;height: 700px;">
            <el-header style="font-size:40px;background-color: rgb(238, 241, 246);text-align: left;">科泰教育CRM</el-header>
            <el-container>
                <el-aside width="200px" style="text-align:left">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>权限管理</template>
                            <router-link to="/user">
                                <el-menu-item index="1-1">用户管理</el-menu-item>
                            </router-link>
                            <router-link to="/role">
                                <el-menu-item index="1-2">角色管理</el-menu-item>
                            </router-link>
                        </el-submenu>
                    </el-menu>

                </el-aside>
                <el-main>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="角色名称">
                            <el-input v-model="formInline.roleName" placeholder="角色名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-row>
                        <el-button type="success" @click="add">新增</el-button>
                    </el-row>

                    <el-table :data="page.records">
                        <el-table-column prop="roleId" label="角色编号" width="140">
                        </el-table-column>
                        <el-table-column prop="roleName" label="角色名称" width="120">
                        </el-table-column>
                        <el-table-column prop="roleDesc" label="角色描述" width="120">
                        </el-table-column>
                        <el-table-column label="角色状态" width="120">
                            <template slot-scope="scope">
                                {{scope.row.roleFlag==1?"启用":"禁用"}}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-row>
                                    <el-button type="primary" @click="edit(scope.row.roleId)">编辑</el-button>
                                    <el-button type="danger" @click="del(scope.row.roleId)">删除</el-button>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>


                    <el-pagination
                        background
                        layout="sizes,prev, pager, next,jumper,total"
                        :current-page="page.current"
                        :page-size="page.size"
                        :total="page.total"
                        @current-change="pageQuery">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>

        <el-dialog :title="title" :visible.sync="dialogFormVisible" @closed="close">
        <el-form :model="form">
            <el-form-item label="请输入角色名称">
                <el-input v-model="form.roleName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="请输入描述">
                <el-input v-model="form.roleDesc" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-switch
                    v-model="form.roleFlag"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0">
                </el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
      return {
        page:{

        },
        formInline: {
            roleName: ''
        },
        dialogFormVisible: false,
        form: {
            roleId:null,
            roleName: '',
            roleDesc: '',
            roleFlag: 1
        },
        title:"",
      }
    },
    //组件一加载
    mounted(){
        this.query(1);
    },
    methods: {
      query(pageNo){
        axios.get("/api/role/list",{
            params:{
                pageIndex:pageNo,
                roleName:this.formInline.roleName
            }
        }).then(res=>{
            this.page=res.data.rolePage;
        }).catch(err=>{
            console.log(err);
        });
      },
      //查询
      search() {
        this.query(1);
      },
      //新增
      add(){
        //设置标题
        this.title="新增角色";
        //对话框显示
        this.dialogFormVisible = true;
      },
      //编辑
      edit(id){
        //设置标题
        this.title="编辑角色";
        //对话框显示
        this.dialogFormVisible = true;
        axios.get("/api/role/edit?roleId="+id).then(res=>{
            this.form=res.data.role;
        }).catch(err=>{
            console.log(err);
        })
      },
      //删除
      del(id){
        this.$confirm('是否删除角色信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            axios.get("/api/role/delete?roleId="+id).then(res=>{
                if(res.data.result==true){
                    //弹出提示框
                    this.$message.success('删除成功');
                    //刷新列表
                    this.query(1);
                }else{
                    this.$message.error('删除失败');
                }
            }).catch(err=>{
                console.log(err);
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
      //保存
      save(){
        var url="";
        if(this.form.roleId==null){//新增
            url="/api/role/save";
        }else{//修改
            url="/api/role/update";
        }
        //发送异步请求到后台进行数据保存
        axios.post(url,this.form).then(res=>{
            if(res.data.result==true){
                //弹出提示框
                this.$message.success('保存成功');
                //隐藏对话框
                this.dialogFormVisible = false
                //刷新列表
                this.query(1);
                //清空
                this.form={ roleFlag: 1};
            }else{
                this.$message.error('保存失败');
            }
        }).catch(err=>{
            console.log(err);
        });
      },
      //分页查询
      pageQuery(pageNo){
        this.query(pageNo);
      },
      //点击取消按钮
      cancel(){
         //隐藏对话框
         this.dialogFormVisible = false
         //清空
         this.form={ roleFlag: 1};
      },
      //关闭对话框
      close(){
        //隐藏对话框
        this.dialogFormVisible = false
        //清空
        this.form={ roleFlag: 1};
      }
    }
}
</script>

<style scoped>

</style>